<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
            v-for指令：
                1.用于展示列表数据
                2.语法：v-for="(item,index) in xxx" :key="yyy"。(yyy，表示id)
                3.适用于数组、对象、字符串（少）、指定次数（少）
         -->
        <div id="root">
            <!-- 遍历数组 -->
            <!-- <h2>人员列表</h2>
            <ul>
                <li v-for="(item,index) in persons ":key="index">
                    {{item.name}}-{{item.age}}
                </li>
            </ul> -->

            <!-- 遍历对象 -->
            <!-- <h2>诸子百家</h2>
                <ul>
                    <li v-for="(value,k) in soft" :key="k">
                        {{k}}-{{value}}
                    </li>
                    </ul> -->

            <!-- 遍历字符串-->
            <!-- <ul>
                <li v-for="(char,index) in str" :key="inedx">
                    {{index}}-{{char}}
                </li>
            </ul> -->
            <!-- 遍历次数 -->
            <!-- <ul>
                <li v-for="(a,b) in 5" :key="b">
                    {{a}}-{{b}}
                </li>
            </ul>  -->
            </div>
        <script>
            Vue.config.productionTip = false;
            const vm = new Vue({
                el:"#root",
               
                data:{
                    str: "hello",
                    persons:[
                        {id:0,name:"张三",age:18},
                        {id:1,name:"李四",age:20},
                        {id:2,name:"王五",age:21}
                    ],
                    soft:{
                        墨家:"天明",
                        阴阳家:"月儿",
                        鬼谷:"二叔"
                    }
                }
            })
        </script>
    </body>
</html>